// 公式1: 1 创任务、2 src读取数据、3 pipe 管道过滤数据、4 dast写数据
// 公式2: 1 下载模块、2 导入模块、3 pipe 使用模块
// 思考：如何替换html中随机的文件名
// 回答：1 打包静态资源时（css/js），保存随机名对应的原名称
// 回答：2 打包静态文件时（html），替换

// 导入模块
const gulp = require('gulp')
const uglify = require('gulp-uglify')  //压缩js 去空格 
const babel = require('gulp-babel')  //JS有兼容 ES6转ES5
const rev = require('gulp-rev') // 去缓存 gulp-rev这是一款为静态文件随机添加一串hash值
const revCollector = require('gulp-rev-collector')  //实现静态资源版本号替换
const cssmin = require('gulp-minify-css')  //压缩css 去空格注释
const imagemin = require('gulp-imagemin')  //压缩图片 
const minifyHtml = require("gulp-minify-html"); //压缩HTML

// 开发服务器配置 =====================================
const server = require('browser-sync').create(); 
const watch = require('gulp-watch'); 
// const proxy = require('http-proxy-middleware')  //0.x.x版本的引用方式
const { createProxyMiddleware } = require('http-proxy-middleware') //1.0.0版本的引用方式

gulp.task('serve', () => {
    server.init({
        // server:'./src',
        server: {
            baseDir: './src',
            middleware: [
             // ...
             createProxyMiddleware('/api', { 
                // 目标服务器网址
                // target: "http://ip.taobao.com/service/getIpInfo.php?ip=114.222.36.165",
                // target: "https://www.baidu.com",
                target: "http://kg.zhaodashen.cn",
                changeOrigin: true, // 是否允许跨域
                secure: false,      // 关闭SSL证书验证https协议接口需要改成true
                pathRewrite: {      // 重写路径请求
                    // 重写
                    // '^/old/api' : '/new/api'
                    // 移除
                    '^/api' : ''
                    // 添加
                    // '^/' : '/basepath/'
                },
             })
            ]
          },
        port: 80
    })

    // 监控文件修改
    watch('src/*.html', function() {
        console.log('你修改HTML文件了');
        server.reload()
    })
    watch('src/css/*.css', function() {
        console.log('你修改CSS文件了');
        server.reload()
    })
    watch('src/js/*.js', function() {
        console.log('你修改js文件了');
        server.reload()
    })
})

// 打包HTML任务
gulp.task('html', over => {
    gulp
    // .src('src/*.html')
    .src(['temp/**/*.json', 'src/*.html'])
    .pipe( revCollector(
    //     {
    //     replaceReved: true,
    //     dirReplacements: {
    //         './js': './js',
    //         './css': './css',
    //     }
    // }
    ) )
    .pipe(minifyHtml())
    .pipe(gulp.dest('dist'))
    over()
})

// 打包IMG任务
gulp.task('imgs', over => {
    gulp
    .src('src/imgs/*.*')
    .pipe(imagemin())
    .pipe(gulp.dest('dist/imgs'))
    setTimeout(() => {
        over()
    }, 30000);
})

// 打包CSS任务
gulp.task('css', over => {
    gulp
    .src('src/css/*.css')
    .pipe(cssmin())
    .pipe(rev())
    .pipe(gulp.dest('dist/css'))
    // 写入JS 之后，将本次的随机名保存起来
    .pipe( rev.manifest() )
    .pipe( gulp.dest( 'temp/css' ) );
    over()
})

// 打包js任务
gulp.task('js', over => {
    gulp
    .src('./src/js/*.js')
    .pipe(babel({"presets": ["env"]}))
    .pipe(uglify())
    .pipe(rev())
    .pipe(gulp.dest('dist/js'))
    // 写入JS 之后，将本次的随机名保存起来
    .pipe( rev.manifest() )
    .pipe( gulp.dest( 'temp/js' ) );
    over()
})


// 打包上线配置   =====================================
gulp.task('build', gulp.series('js', 'css', 'imgs', 'html', () => {
    console.log('build ok');  //这里留心：js、css里面都必须over
}))


// gulp.task('a1', over => {
//     console.log('this is a1');
//     over()
// })
// gulp.task('a2', over => {
//     console.log('this is a2');
//     over()
// })
// // gulp.task('build', () => {
// //     console.log('this is build ok');
// // })
// // gulp.task（任务名，gulp.series/parallel(依赖任务，...，依赖任务，任务处理函数））
// gulp.task('build', gulp.series('a1', 'a2', () => {
//     console.log('ok');
// }))


